<template>
  <view class="content">
    <!-- 内容 -->
    <mescroll-body
      ref="mescrollRef"
      @init="mescrollInit"
      :down="downOption"
      @down="downCallback"
      @up="upCallback"
    >
      <uni-nav-bar
        title="奖励明细"
        color="#fff"
        backgroundColor="transparent"
        :border="false"
        :statusBar="true"
        :fixed="true"
        @clickLeft="$c.back()"
      >
        <view class="uni-nav-bar-l-icon" slot="left">
          <view class="uni-nav-bar-l-icon-left icon">
            <image :src="$img('/static/img2/cc20.png')" lazy-load></image>
          </view>
        </view>
      </uni-nav-bar>

      <view class="coupon">
        <view
          v-for="(item, index) in aixuanArr"
          :key="index"
          class="coupon_item"
        >
          <view class="coupon_item_1">
            <view>{{ item.content }}</view>
            <view>{{ item.addtime }}</view>
          </view>
          <view class="coupon_r flex_center">
            <text>{{ item.change_money }}</text>
            <!-- <image src="../../static/mine/$.png"></image> -->
          </view>
        </view>
      </view>
    </mescroll-body>
  </view>
</template>

<script>
export default {
  data() {
    return {
      arr: ['全部', '收入', '花费'],
      show: 1,
      aixuanArr: [],
      downOption: {
        auto: false
      }
    }
  },
  onLoad(e) {
    // setTimeout(() => {
    //   this.aixuanArr = [
    //     {
    //       content: '邀请获得',
    //       nickname:
    //         '名字名字名字名字名字名字名字名字名字名字名字名字名字名字名字名字名字名字',
    //       addtime: '2333-23-23 23:23:23',
    //       change_money: 233.33
    //     },
    //     {
    //       content: '邀请获得',
    //       nickname:
    //         '名字名字名字名字名字名字名字名字名字名字名字名字名字名字名字名字名字名字',
    //       addtime: '2333-23-23 23:23:23',
    //       change_money: 233.33
    //     }
    //   ]
    // }, 1000)
  },
  methods: {
    back() {
      uni.navigateBack()
    },

    getlist(v) {
      this.show = v
      this.mescroll.resetUpScroll()
    },
    downCallback() {
      this.mescroll.resetUpScroll()
    },
    upCallback(page) {
      this.loadData(page.num)
    },
    loadData(pageNo) {
      // 模拟接口
      let that = this
      that.req({
        url: 'invitation_commission',
        Loading: true,
        data: {
          page: pageNo
        },
        success(res) {
          that.mescroll.endByPage(res.data.data.length, res.data.last_page)
          if (pageNo == 1) {
            that.aixuanArr = res.data.data
          } else {
            that.aixuanArr = that.aixuanArr.concat(res.data.data)
          }
        }
      })
    }
  }
}
</script>

<style lang="scss">
.coupon_r > image {
  width: 32rpx;
  height: 32rpx;
  margin-left: 10rpx;
}

.coupon_r {
  font-size: 28rpx;
  /* font-family: 'zcq'; */
  color: #E40D1D;
}

.coupon_item_1 > view:nth-of-type(2) {
  font-size: 24rpx;
  color: #ccc;
  margin-top: 10rpx;
}

.coupon_item_1 > view:nth-of-type(1) {
  font-size: 28rpx;
  // font-weight: bold;
  color: #ffffff;
}

.coupon_item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 30rpx 0;
  box-sizing: border-box;
  position: relative;
  border-bottom: 1rpx solid rgba(255, 255, 255, 0.1);
}

.coupon {
  width: 690rpx;
  margin: 20rpx auto;
  /* background: #11141D;
		box-shadow: 0px 0px 10rpx 0px rgba(150, 255, 254, 0.7);
		padding: 0 30rpx; */
  box-sizing: border-box;
  /* border-radius: 20rpx; */
}

.qiehuan {
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #333333;
  width: 300rpx;
}

.qiehuan_line {
  margin: auto;
  width: 48rpx;
  height: 4rpx;
  background: #f96026;
}

.qiehuan > view {
  flex: 1;
  text-align: center;
}

.wzs {
  font-size: 28rpx;
  color: #999999;
  margin-bottom: 10rpx;
}

.xzs {
  font-size: 32rpx;
  font-weight: bold;
  margin-bottom: 10rpx;
}

.close {
  text-align: left;
}

.close > image {
  width: 48rpx;
  height: 48rpx;
}

.head > view {
  flex: 1;
}

.head {
  width: 750rpx;
  height: 88rpx;
  padding: 0 20rpx;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  /* font-family: 'zcq'; */
  color: #ffffff;
  font-size: 36rpx;
  text-shadow: 0px 0px 10rpx rgba(150, 255, 254, 0.6);
}

.header {
  width: 750rpx;
  /* height: 176rpx; */
  padding-bottom: 30rpx;
  background: rgba(0, 0, 0, 0.8);
  font-size: 28rpx;
  color: #333333;
  box-sizing: border-box;
  position: fixed;
  top: 0;
  /* #ifdef MP */
  padding-top: 24rpx;
  /* #endif */
  z-index: 15;
}

.status_bar {
  height: var(--status-bar-height);
  width: 100%;
}

.content {
  width: 100vw;
  min-height: 100vh;
  box-sizing: border-box;
  padding-top: 1rpx;
}
</style>
